<div class="row">
    <div class="col-md-8 col-sm-8 col-md-offset-2 col-sm-offset-2">
        <object type="image/svg+xml" data="{{public "images/API_LIFECYCLE.svg"}}" id="lifecycle-svg">
            Your browser does not support SVG
        </object>
    </div>
</div>
<div class="row">
    <div id="lifecycle-content " class="tab-content col-md-6 col-sm-6">
        <div class="page-header">
            <h4 class="lead">Change Lifecycle</h4>
        </div>
        <form class="form-horizontal lifecycle-state">
            <div class="well remove-padding-top remove-padding-bottom">
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-4 col-md-3 col-lg-2 text-center-xs" name="state"><h4>
                        Current State:</h4></label>
                    <div class="controls col-xs-12 col-sm-8 col-md-9 col-lg-10 text-center-xs">
                        <h4><p class="form-control-static" name="stateValue"><strong>{{@params.lifeCycleStatus}}</strong>
                        </p></h4>
                    </div>
                </div>

            </div>
            {{#each @params.lcState.checkItemBeanList}}
            <div class="form-actions">
                <label class="control-label col-sm-2"></label>
                <label class="checkbox col-sm-4" id="checkListItem">
                    <input type="checkbox" id="checkItem" name="checkItem" value="{{this.name}}" {{#if this.value}}checked{{/if}}>
                    <span class="helper">{{this.name}}</span>
                </label>
            </div>
            {{/each}}

            <div class="form-actions">
                <div class="btn-group btn-group-justified" role="group" aria-label="btn">
                    {{#each @params.lcState.availableTransitionBeanList}}
                    <div class="btn-group" role="group">
                        <input type="button"
                               class="btn btn-primary lc-state-btn" data-lcstate="{{this.targetState}}" value="{{this.targetState}}">
                    </div>

                    {{/each}}
                </div>
                <div class="page-header">
                    <h4 class="lead">Lifecycle History</h4>
                </div>
                <table class="lifeCycleTable" id="lifeCycleTable">
                    <thead>
                    </thead>
                    <tbody>
                        {{#each @params.lcHistory}}
                            {{#if this.previousState}}
                                <tr>
                                    <td><i class="glyphicon glyphicon-info-sign" title="date"></i> <b><span
                                            class="dateFull">{{this.updatedTime}}</span></b>
                                    </td>
                                    <td>&nbsp;&nbsp;&nbsp; <i class="glyphicon glyphicon-user" title="user"></i>&nbsp;<a
                                            href="/publisher/apis?query=provider:{{this.user}}" title="user">{{this.user}}</a>
                                        {{i18n "changed the API status from "}} '{{i18n this.previousState}}'
                                        {{i18n "to "}} '{{i18n this.postState}}'
                                    </td>
                                </tr>
                            {{else}}
                                <tr>
                                    <td><i class="glyphicon glyphicon-info-sign" title="date"></i> <b><span
                                            class="dateFull">{{this.updatedTime}}</span></b>
                                    </td>
                                    <td>&nbsp;&nbsp;&nbsp; <i class="glyphicon glyphicon-user" title="user"></i>&nbsp;<a
                                            href="/publisher/apis?query=provider:{{this.user}}" title="user">{{this.user}}</a>
                                        {{i18n "created the API."}}
                                    </td>
                                </tr>
                            {{/if}}
                        {{/each}}
                    </tbody>
                </table>
            </div>
        </form>
    </div>
    <div class="col-md-6 col-sm-6">
        <div class="page-header">
            <h4 class="lead">Change Policies</h4>
        </div>
        <div class="col-md-6 col-sm-6">
            <label for="policies-list-dropdown">
                Policies :
            </label>
            <select id="policies-list-dropdown" multiple="multiple">
                {{#each @params.policies}}
                    <option {{#if this.isSelected }}selected{{/if}}
                            value="{{this.policyName}}">{{this.displayName}}</option>
                {{/each}}
            </select>
        </div>
        <div class="col-md-3 col-sm-3">
            <button id="update-tiers-button" type="button" class="btn btn-primary">Update</button>
        </div>
    </div>
</div>
